Component({
  properties: {
    type: {
      type: String,
      value: "primary",
      validator(val) {
        return ["default", "primary"].includes(val);
      },
    },
    size: {
      type: String,
      value: "medium",
      validator(val) {
        return ["small", "medium", "large"].includes(val);
      },
    },
    width: {
      type: String,
      value: "auto",
    },
    radius: {
      type: String,
      value: "16rpx",
    },
    style: {
      type: String,
      value: "",
    },
    disabled: {
      type: Boolean,
      value: false,
    },
    plain: {
      type: Boolean,
      value: false,
    },
    formType: {
      type: String,
      value: "",
      validator(val) {
        return ["submit", "reset"].includes(val);
      },
    },
    openType: {
      type: String,
      value: "",
      validator(val) {
        return [
          "contact",
          "share",
          "getPhoneNumber",
          "getUserInfo",
          "openSetting",
          "chooseAvatar",
        ].includes(val);
      },
    },
  },

  data: {
    class: "",
    style: "",
  },
  observers: {
    type(newVal) {
      this.initAttr();
    },
  },
  lifetimes: {
    attached() {
      this.initAttr();
    },
  },
  methods: {
    initAttr() {
      const { type, size, width, disabled, plain, radius } = this.data;
      this.setData({
        style: `${
          radius ? "border-radius:" + radius + ";" : ""
        }width:${width};`,
        class: `${type} ${size} ${disabled ? "disabled" : ""} ${
          plain ? "plain" : ""
        }`,
      });
    },
  },
});
